{% extends 'base.html' %}

{% load staticfiles %}

{% block title %}首页{% endblock %}

{% block body %}

    <!--banner start-->
    <div class="banner">
        <div class="wp">
            <div class="fl">
                <div class="imgslide">
                    <ul class="imgs">
                        {% for banner in banners %}
                            <li>
                                <a href="{{ banner.banner_url }}">
                                    <img width="1200" height="478" src="{{ MEDIA_URL }}{{ banner.image }}"/>
                                </a>
                            </li>

                        {% endfor %}

                    </ul>
                </div>
                <div class="unslider-arrow prev"></div>
                <div class="unslider-arrow next"></div>
            </div>
        </div>
    </div>
    <!--banner end-->

    <!--feature start-->
    <section>
        <div class="wp">
            <ul class="feature">
                <li class="feature1">
                    <img class="pic" src="{% static 'images/feature1.png' %}"/>
                    <p class="center">专业权威</p>
                </li>
                <li class="feature2">
                    <img class="pic" src="{% static 'images/feature2.png' %}"/>
                    <p class="center">课程最新</p>
                </li>
                <li class="feature3">
                    <img class="pic" src="{% static 'images/feature3.png' %}"/>
                    <p class="center">名师授课</p>
                </li>
                <li class="feature4">
                    <img class="pic" src="{% static 'images/feature4.png' %}"/>
                    <p class="center">数据真实</p>
                </li>
            </ul>
        </div>
    </section>
    <!--feature end-->

    <!--module start-->
    <section>
        <div class="module">
            <div class="wp">
                <h1>公开课程</h1>
                <div class="module1 eachmod">
                    <div class="module1_1 left">
                        <img width="228" height="614" src="{% static 'images/module1_1.jpg' %}"/>
                        <p class="fisrt_word">名师授课<br/>专业权威</p>
                        <a class="more" href="{% url 'courses:list' %}">查看更多课程 ></a>
                    </div>
                    <div class="right group_list">
                        <div class="module1_2 box">
                            <div class="imgslide2">
                                <ul class="imgs">
                                    {% for banner_course in banner_courses %}
                                        <li>
                                            <a href="{% url 'courses:detail' banner_course.id %}">
                                                <img width="470" height="300"
                                                     src="{{ MEDIA_URL }}{{ banner_course.image }}"/>
                                            </a>
                                        </li>
                                    {% endfor %}

                                </ul>
                            </div>
                            <div class="unslider-arrow2 prev"></div>
                            <div class="unslider-arrow2 next"></div>
                        </div>
                        {% for course in courses %}
                            <div class="module1_{{ forloop.counter|add:2 }} box">
                                <a href="{% url 'courses:detail' course.id %}">
                                    <img width="233" height="190" src="{{ MEDIA_URL }}{{ course.image }}"/>
                                </a>
                                <div class="des">
                                    <a href="{% url 'courses:detail' course.id %}">
                                        <h2 title="{{ course.name }}">{{ course.name }}</h2>
                                    </a>
                                    <span class="fl">难度：<i class="key">{{ course.get_degree_display }}</i></span>
                                    <span class="fr">学习人数：{{ course.students }}</span>
                                </div>
                                <div class="bottom">
                                    <span class="fl"
                                          title="{{ course.course_org.name }}">{{ course.course_org.name }}</span>
                                    <span class="star fr">{{ course.fav_nums }}</span>
                                </div>
                            </div>
                        {% endfor %}

                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="module">
            <div class="wp">
                <h1>新上好课</h1>
                <div class="module1 eachmod">
                    <div class="module1_1 left">
                        <img width="228" height="614" src="{% static 'images/module4_1.jpg' %}"/>
                        <p class="fisrt_word">力学笃行<br/>志存高远</p>
                        <a class="more" href="{% url 'courses:list' %}">查看更多课程 ></a>
                    </div>
                    <div class="right group_list">


                        <div class="module1_{{ forloop.counter|add:2 }} box">
                            <a href="https://coding.imooc.com/class/401.html?mc_marking=58fc4a3eef797bb53e2a572b4492e1cb&mc_channel=syb9">
                                <img width="233" height="190" src="../static/images/vue.png"/>
                            </a>
                            <div class="des">
                                <a href="https://coding.imooc.com/class/401.html?mc_marking=58fc4a3eef797bb53e2a572b4492e1cb&mc_channel=syb9">
                                    <h2 title="">Vue Element+Node.js开发</h2>
                                </a>
                                <span class="fl">难度：<i class="key">高级</i></span>
                                <span class="fr">学习人数：463</span>
                            </div>
                            <div class="bottom">
                                    <span class="fl"
                                          title="" style="color: red">¥ 348.00</span>
                                <span class="star" style="color: red">购买</span>
                            </div>
                        </div>

                        <div class="module1_{{ forloop.counter|add:2 }} box">
                            <a href="https://coding.imooc.com/class/407.html?mc_marking=b587280c0c1c0e76c1092aa21406565a&mc_channel=syb6">
                                <img width="233" height="190" src="../static/images/vue01.png"/>
                            </a>
                            <div class="des">
                                <a href="https://coding.imooc.com/class/407.html?mc_marking=b587280c0c1c0e76c1092aa21406565a&mc_channel=syb6">
                                    <h2 title="">全流程开发 TP6.0实战</h2>
                                </a>
                                <span class="fl">难度：<i class="key">中级</i></span>
                                <span class="fr">学习人数：86</span>
                            </div>
                            <div class="bottom">
                                    <span class="fl"
                                          title="" style="color: red">¥ 339.00</span>
                                <span class="star" style="color: red">购买</span>
                            </div>
                        </div>

                        <div class="module1_{{ forloop.counter|add:2 }} box">
                            <a href="https://coding.imooc.com/class/392.html?mc_marking=60e5294c605a87b2af7257d06f70505e&mc_channel=syb7">
                                <img width="233" height="190" src="../static/images/vue2.jpg"/>
                            </a>
                            <div class="des">
                                <a href="https://coding.imooc.com/class/392.html?mc_marking=60e5294c605a87b2af7257d06f70505e&mc_channel=syb7">
                                    <h2 title="">VJava通用型支付+电商</h2>
                                </a>
                                <span class="fl">难度：<i class="key">初级</i></span>
                                <span class="fr">学习人数：452</span>
                            </div>
                            <div class="bottom">
                                    <span class="fl"
                                          title="" style="color: red">¥ 298.00</span>
                                <span class="star" style="color: red">购买</span>
                            </div>
                        </div>
                        <div class="module1_{{ forloop.counter|add:2 }} box">
                            <a href="https://coding.imooc.com/class/395.html?mc_marking=e0b7020c55162407944b7ca0fa1373f8&mc_channel=syb13">
                                <img width="233" height="190" src="../static/images/vue02.png"/>
                            </a>
                            <div class="des">
                                <a href="https://coding.imooc.com/class/395.html?mc_marking=e0b7020c55162407944b7ca0fa1373f8&mc_channel=syb13">
                                    <h2 title="">编程必备基础 HTTP协议</h2>
                                </a>
                                <span class="fl">难度：<i class="key">中级</i></span>
                                <span class="fr">学习人数：507</span>
                            </div>
                            <div class="bottom">
                                    <span class="fl"
                                          title="" style="color: red">¥ 199.00</span>
                                <span class="star" style="color: red">购买</span>
                            </div>
                        </div>
                        <div class="module1_{{ forloop.counter|add:2 }} box">
                            <a href="https://coding.imooc.com/class/397.html?mc_marking=1f1eb391b59b3e4139718a46d8673049&mc_channel=syb10">
                                <img width="233" height="190" src="../static/images/vue4.jpg"/>
                            </a>
                            <div class="des">
                                <a href="https://coding.imooc.com/class/397.html?mc_marking=1f1eb391b59b3e4139718a46d8673049&mc_channel=syb10">
                                    <h2 title="">Vue全家桶实战 小米电商</h2>
                                </a>
                                <span class="fl">难度：<i class="key">中级</i></span>
                                <span class="fr">学习人数：64</span>
                            </div>
                            <div class="bottom">
                                    <span class="fl"
                                          title="" style="color: red">¥ 298.00</span>
                                <span class="star" style="color: red">购买</span>
                            </div>
                        </div>

                        <div class="module1_{{ forloop.counter|add:2 }} box">
                            <a href="https://coding.imooc.com/class/404.html?mc_marking=a7b3119105f0cbb234506fc15f6bfbc4&mc_channel=syb8">
                                <img width="233" height="190" src="../static/images/vue5.jpg"/>
                            </a>
                            <div class="des">
                                <a href="https://coding.imooc.com/class/404.html?mc_marking=a7b3119105f0cbb234506fc15f6bfbc4&mc_channel=syb8">
                                    <h2 title="">深入解析SpringBoot源码</h2>
                                </a>
                                <span class="fl">难度：<i class="key">中级</i></span>
                                <span class="fr">学习人数：191</span>
                            </div>
                            <div class="bottom">
                                    <span class="fl"
                                          title="" style="color: red">¥ 316.00</span>
                                <span class="star" style="color: red">购买</span>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="module greybg">
            <div class="wp">
                <h1>课程机构</h1>
                <div class="module3 eachmod">
                    <div class="module3_1 left">
                        <img width="228" height="463" src="{% static 'images/module3_1.jpg' %}"/>
                        <p class="fisrt_word">名校来袭<br/>权威认证</p>
                        <a class="more" href="{% url 'org:org_list' %}">查看更多机构 ></a>
                    </div>
                    <div class="right">
                        <ul>
                            {% for org in orgs %}
                                <li class="{% if forloop.counter|divisibleby:5 %}five{% endif %}">
                                    <a href="{% url 'org:org_home' org.id %}">
                                        <div class="company">
                                            <img width="184" height="100" src="{{ MEDIA_URL }}{{ org.image }}"/>
                                            <div class="score">
                                                <div class="circle">
                                                    <h2>{{ org.tag }}</h2>
                                                </div>
                                            </div>
                                        </div>
                                        <p><span class="key" title="{{ org.name }}">{{ org.name }}</span></p>
                                    </a>
                                </li>
                            {% endfor %}

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--module end-->
{% endblock %}

{% block custom_js %}
    <script type="text/javascript" src="{% static 'js/index.js' %}"></script>
{% endblock %}

